<template>
    <el-row :gutter="30">
        <el-card style="margin:0 0 20px 0px">
            <el-row class="form-row">
                <el-form label-position="right" label-width="90px" inline>
                    <p style="font-size: 24px">合同详情</p>
                </el-form>
            </el-row>
            <el-tabs v-model="type" type="card" @tab-click="handleClick">
                <el-tab-pane label="重要事项" name="matter">
                    <el-button type="primary" icon="md-add" size="large"
                               @click="updateMatter('新增')">新增
                    </el-button>
                    <el-table stripe border v-loading="tableLoading" :data="tableData" size="large" ref="table">
                        <template slot="empty">暂无数据</template>
                        <el-table-column prop="matterContent" label="事项内容"></el-table-column>
                        <el-table-column prop="executionPeriod" :formatter="dateFormatter"
                                         label="执行期限"></el-table-column>
                        <el-table-column prop="wyCompanyName" label="负责部门"></el-table-column>
                        <el-table-column prop="wyUserName" label="负责人"></el-table-column>
                        <el-table-column prop="status" label="执行状态">
                            <template slot-scope="scope">
                                <p v-if="scope.row.status == true" style="color:green">已执行</p>
                                <p v-if="scope.row.status == false" style="color:red">未执行</p>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="150" align="center">
                            <template slot-scope="scope">
                                <el-button size="mini" type="primary" @click="updateMatter('修改',scope.row)">修改
                                </el-button>
                                <el-button size="mini" type="danger" @click="deleteMatter(scope.row.id)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="合同收款" name="receipt">
                    <el-button type="primary" icon="md-add" size="large"
                               @click="updateFunds('新增')">新增
                    </el-button>
                    <el-table stripe border v-loading="tableLoading" :data="tableData" size="large" ref="table">
                        <template slot="empty">暂无数据</template>
                        <el-table-column prop="money" label="金额(￥)"></el-table-column>
                        <el-table-column prop="receivePaymentDate" :formatter="dateFormatter"
                                         label="收款期限"></el-table-column>
                        <el-table-column prop="payType" label="收款方式">
                            <template slot-scope="scope">
                                <p v-if="scope.row.payType == 1">微信</p>
                                <p v-if="scope.row.payType == 2">支付宝</p>
                                <p v-if="scope.row.payType == 3">现金</p>
                                <p v-if="scope.row.payType == 4">刷卡</p>
                                <p v-if="scope.row.payType == 5">银行转账</p>
                            </template>
                        </el-table-column>
                        <el-table-column prop="status" label="收款状态">
                            <template slot-scope="scope">
                                <p v-if="scope.row.status == true" style="color:green">已支付</p>
                                <p v-if="scope.row.status == false" style="color:red">未支付</p>
                            </template>
                        </el-table-column>
                        <el-table-column prop="remarks" label="说明"></el-table-column>
                        <el-table-column label="操作" width="150" align="center">
                            <template slot-scope="scope">
                                <el-button size="mini" type="primary" @click="updateFunds('修改',scope.row)">修改
                                </el-button>
                                <el-button size="mini" type="danger" @click="deleteFunds(scope.row.id)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="合同付款" name="payment">
                    <el-button type="primary" icon="md-add" size="large"
                               @click="updateFunds('新增')">新增
                    </el-button>
                    <el-table stripe border v-loading="tableLoading" :data="tableData" size="large" ref="table">
                        <template slot="empty">暂无数据</template>
                        <el-table-column prop="money" label="金额(￥)"></el-table-column>
                        <el-table-column prop="receivePaymentDate" :formatter="dateFormatter"
                                         label="付款期限"></el-table-column>
                        <el-table-column prop="payType" label="付款方式">
                            <template slot-scope="scope">
                                <p v-if="scope.row.payType == 1">微信</p>
                                <p v-if="scope.row.payType == 2">支付宝</p>
                                <p v-if="scope.row.payType == 3">现金</p>
                                <p v-if="scope.row.payType == 4">刷卡</p>
                                <p v-if="scope.row.payType == 5">银行转账</p>
                            </template>
                        </el-table-column>
                        <el-table-column prop="status" label="付款状态">
                            <template slot-scope="scope">
                                <p v-if="scope.row.status == true" style="color:green">已支付</p>
                                <p v-if="scope.row.status == false" style="color:red">未支付</p>
                            </template>
                        </el-table-column>
                        <el-table-column prop="remarks" label="说明"></el-table-column>
                        <el-table-column label="操作" width="150" align="center">
                            <template slot-scope="scope">
                                <el-button size="mini" type="primary" @click="updateFunds('修改',scope.row)">修改
                                </el-button>
                                <el-button size="mini" type="danger" @click="deleteFunds(scope.row.id)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </el-card>
        <!--合同事项-->
        <el-dialog title="合同事项管理" :visible.sync="matterVisible" :close-on-click-modal="false" width="900px">
            <el-form :model="matter" :rules="rules" ref="matterForm" label-width="150px">
                <el-form-item label="事项内容" prop="matterContent">
                    <el-input v-model="matter.matterContent" placeholder="请输入合同事项内容"></el-input>
                </el-form-item>
                <el-form-item label="事项执行期限" prop="executionPeriod">
                    <el-date-picker v-model="matter.executionPeriod" style="width: 100%" type="date"
                                    placeholder="选择日期"></el-date-picker>
                </el-form-item>
                <el-form-item label="负责部门" prop="matteWyCompanyId">
                    <treeselect :options="treeList" :default-expand-level="1" @select="companyChange"
                                noChildrenText="没有子节点" noOptionsText="暂无选项" noResultsText="没有发现结果"
                                placeholder="请选择合同事项负责部门" v-model="matter.matteWyCompanyId"/>
                </el-form-item>
                <el-form-item label="负责人" prop="matteWyUserId">
                    <el-select v-model="matter.matteWyUserId" style="width:100%" clearable
                               placeholder="请选择合同事项负责人">
                        <el-option
                            v-for="item in wyUserList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="执行状态" prop="status">
                    <el-radio v-model="matter.status" :label="true">已执行</el-radio>
                    <el-radio v-model="matter.status" :label="false">未执行</el-radio>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="matterVisible = false">取 消</el-button>
                <el-button type="primary" :loading="formLoading" @click="sureAddMatter()">确 定
                </el-button>
            </div>
        </el-dialog>
        <!--收付款-->
        <el-dialog title="合同收付款" :visible.sync="fundsVisible" :close-on-click-modal="false" width="900px">
            <el-tabs v-model="type" type="card">
                <el-tab-pane label="合同收款" name="receipt">
                    <el-form :model="funds" :rules="rules" ref="fundsForm" label-width="150px">
                        <el-form-item label="金额(￥)" prop="money">
                            <el-input type="number" v-model="funds.money" placeholder="请输入收款金额"></el-input>
                        </el-form-item>
                        <el-form-item label="收款日期" prop="receivePaymentDate">
                            <el-date-picker v-model="funds.receivePaymentDate" style="width: 100%" type="date"
                                            placeholder="选择日期"></el-date-picker>
                        </el-form-item>
                        <el-form-item label="收款方式" prop="payType">
                            <el-select v-model="funds.payType" style="width:100%" clearable
                                       placeholder="请选择收款方式">
                                <el-option key="1" value="1" label="微信"></el-option>
                                <el-option key="2" value="2" label="支付宝"></el-option>
                                <el-option key="3" value="3" label="现金"></el-option>
                                <el-option key="4" value="4" label="刷卡"></el-option>
                                <el-option key="5" value="5" label="银行转账"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="收款状态" prop="status">
                            <el-radio v-model="funds.status" :label="true">已收款</el-radio>
                            <el-radio v-model="funds.status" :label="false">未收款</el-radio>
                        </el-form-item>
                        <el-form-item label="说明" prop="remarks">
                            <el-input v-model="funds.remarks" placeholder="请输入收款说明"></el-input>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="合同付款" name="payment">
                    <el-form :model="funds" :rules="rules" ref="fundsForm" label-width="150px">
                        <el-form-item label="金额(￥)" prop="money">
                            <el-input type="number" v-model="funds.money" placeholder="请输入付款金额"></el-input>
                        </el-form-item>
                        <el-form-item label="付款日期" prop="receivePaymentDate">
                            <el-date-picker v-model="funds.receivePaymentDate" style="width: 100%" type="date"
                                            placeholder="选择日期"></el-date-picker>
                        </el-form-item>
                        <el-form-item label="付款方式" prop="payType">
                            <el-select v-model="funds.payType" style="width:100%" clearable
                                       placeholder="请选择付款方式">
                                <el-option key="1" value="1" label="微信"></el-option>
                                <el-option key="2" value="2" label="支付宝"></el-option>
                                <el-option key="3" value="3" label="现金"></el-option>
                                <el-option key="4" value="4" label="刷卡"></el-option>
                                <el-option key="5" value="5" label="银行转账"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="付款状态" prop="status">
                            <el-radio v-model="funds.status" :label="true">已付款</el-radio>
                            <el-radio v-model="funds.status" :label="false">未付款</el-radio>
                        </el-form-item>
                        <el-form-item label="说明" prop="remarks">
                            <el-input v-model="funds.remarks" placeholder="请输入付款说明"></el-input>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
            </el-tabs>
            <div slot="footer">
                <el-button @click="fundsVisible = false">取 消</el-button>
                <el-button type="primary" :loading="formLoading" @click="sureAddFunds()">确 定
                </el-button>
            </div>
        </el-dialog>
    </el-row>
</template>
<script>
    import Treeselect from "@riophae/vue-treeselect";
    import moment from "moment"

    export default {
        components: {
            Treeselect
        },
        data() {
            return {
                //校验规则
                rules: {},
                filters: {},
                //表单提交状态
                formLoading: false,
                tableLoading: false,
                tableData: [],
                treeList: [],
                //合同事项
                matterVisible: false,
                matter: {},
                wyUserList: [],
                //合同收付款
                fundsVisible: false,
                type: "matter",
                funds: {},
            };
        },

        created: function () {
            this.getContractInfo();
            this.getTreeData();
        },
        methods: {
            getContractInfo() {
                this.filters.contractInfoId = this.$route.query.id;
                this.loadData();
            },
            //选中的标签 tab 实例
            handleClick() {
                this.loadData();
            },
            //获取部门信息
            getTreeData() {
                this.postRequest("/api/manageHR/getCompany").then(res => {
                    if (res.code == 20000) {
                        this.treeList = res.data;
                    } else {
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
            },
            //添加事项选择负责部门加载员工
            companyChange(data) {
                this.matter.matteWyUserId = '';
                const params = {};
                params.pageNum = null;
                params.companyId = data.companyId;
                //与后台交换数据
                this.postRequest("/api/manageHR/userLoadData", params).then(res => {
                    if (res.code == 20000) {
                        this.wyUserList = res.data.list;
                    } else {
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
            },
            //加载数据
            loadData() {
                let url = "/api/contract/getContravtInfoMatterList";
                if (this.type != "matter") {
                    url = "/api/contract/getContractInfoFundsList";
                    //付款
                    this.filters.type = 1
                    //收款
                    if (this.type == "receipt") {
                        this.filters.type = 2
                    }
                }
                this.postRequest(url, this.filters).then(res => {
                    this.tableLoading = false;
                    if (res.code == 20000) {
                        this.tableData = res.data;
                    } else {
                        this.tableData = [];
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
            },
            //日期格式化
            dateFormatter(row, column, cellValue, index) {
                if (typeof cellValue === 'string') {
                    if (cellValue) {
                        return cellValue.substring(0, 10);
                    }
                }
            },
            //修改合同事项
            updateMatter(str,row) {
                this.matter = {};
                this.matterVisible = true;
                if(str=='修改') {
                    const companyId = row.matteWyCompanyId;
                    let data = {
                        companyId: companyId
                    }
                    this.companyChange(data);
                    this.matter = row;
                }
            },
            //确定添加合同事项
            sureAddMatter() {
                this.matter.contractInfoId = this.filters.contractInfoId
                this.matter.executionPeriod = moment(this.matter.executionPeriod).format("YYYY-MM-DD");
                console.log(this.matter)
                this.postRequest("/api/contract/saveOrUpdateMatter", this.matter).then(res => {
                    this.formLoading = false;
                    if (res.code == 20000) {
                        this.matterVisible = false;
                        this.loadData();
                        this.$Message.success({
                            content: "操作成功",
                            duration: 5
                        });
                    } else {
                        this.$message.error(res.message);
                    }
                });
            },
            //删除事项
            deleteMatter(id) {
                this.$Modal.confirm({
                    title: "提示",
                    content: "确定删除？",
                    onOk: () => {
                        this.getRequest("/api/contract/deleteMatter?id=" + id).then(res => {
                            if (res.code == 20000) {
                                this.$Message.success("删除成功!");
                                this.loadData();
                            } else {
                                this.$Message.error({
                                    content: res.message,
                                    duration: 5
                                });
                            }
                        });
                    }
                })
            },
            //修改收付款
            updateFunds(str,row) {
                console.log(row)
                this.funds = {};
                this.fundsVisible = true;
                if(str=='修改'){
                    this.funds = row;
                }
            },
            //确定收付款
            sureAddFunds() {
                //合同收款
                if (this.type == "receipt") {
                    this.funds.type = 2
                }
                //合同付款
                if (this.type == "payment") {
                    this.funds.type = 1
                }
                this.funds.contractInfoId = this.filters.contractInfoId;
                this.funds.receivePaymentDate = moment(this.funds.receivePaymentDate).format("YYYY-MM-DD");
                console.log(this.funds);
                this.postRequest("/api/contract/saveOrUpdateFunds", this.funds).then(res => {
                    this.formLoading = false;
                    if (res.code == 20000) {
                        this.fundsVisible = false;
                        this.loadData();
                        this.$Message.success({
                            content: "操作成功",
                            duration: 5
                        });
                    } else {
                        this.$message.error(res.message);
                    }
                });
            },
            //删除收付款
            deleteFunds(id) {
                this.$Modal.confirm({
                    title: "提示",
                    content: "确定删除？",
                    onOk: () => {
                        this.getRequest("/api/contract/deleteFunds?id=" + id).then(res => {
                            if (res.code == 20000) {
                                this.$Message.success("删除成功!");
                                this.loadData();
                            } else {
                                this.$Message.error({
                                    content: res.message,
                                    duration: 5
                                });
                            }
                        });
                    }
                })
            },
        }
    };
</script>
